<template>
    <div class="updateMain">
        <div class="title">
             <span class="titleText"><i>*</i>仓库标题：</span>
             <el-input v-model="details.wh_name" placeholder="输入仓库标题"></el-input>
        </div>
        <div class="title">
             <span class="titleText"><i>*</i>绑定仓库管理员：</span>
             <div class="inputType">
                 <span @click="clickPersonnel">请选择人员</span>
                    <el-tag
                        v-for="(item,index) in details.admin"
                        :key="index"
                        :closable="!item.no_del"
                        @close="clearAdmin(item,index)"
                        >
                        {{item.name}}
                    </el-tag>
             </div>
        </div>
        <div class="department">
             <span class="titleText"><i>*</i>使用资产版块的部门：</span>
             <div class="textareaType">
                    <div class="depBtn" @click="clickDept(1)">选择部门</div>
                    <div class="menuList">
                        <el-tag
                            v-for="(item,index) in details.a_dept"
                            :key="index"
                            :closable="!item.no_del"
                            @close="clearFn(1,item,index)"
                            >
                           【{{item.name}}】
                        </el-tag>
                    </div>
             </div>
        </div>
        <div class="department">
             <span class="titleText"><i>*</i>使用耗材版块的部门：</span>
             <div class="textareaType">
                    <div class="depBtn" @click="clickDept(2)">选择部门</div>
                    <div class="menuList">
                        <el-tag
                            v-for="(item,index) in details.c_dept"
                            :key="index"
                            :closable="!item.no_del"
                            @close="clearFn(2,item,index)"
                            >
                           【{{item.name}}】
                        </el-tag>
                    </div>
             </div>
        </div>
        <div class="btns">
             <el-button type="primary" @click="confrim">提交</el-button>
             <el-button type="info" @click="close">取消</el-button>
        </div>
    </div>
</template>

<script>
    import { getWarehouseInfo,updateDept  } from './api'
    import {complexPicker , departmentsPicker} from "@/libs/utils" /**封装选部门方法 */
    export default {
        props:{
           id:[String,Number]
        },
        created(){
           console.log(this.id,'idididid')
        },
        watch:{
            id(news){
              if(news == '') return false
              this.details = {}
              this.getWarehouseInfoDetails(news)
            }
        },
        data(){
            return {
                details:{},
                currentAdmin:[],
                c_deptArr:[],
                a_deptArr:[],
            }
        },
        methods:{
            clearAdmin(item,index){
                this.$confirm(`即将移除"仓库管理员 ${item.admin_name}", 是否继续?`, '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.details.admin.splice(index,1)
                });
            },
            clearFn(type,item,index){
                this.$confirm(`即将移除"${type == 1 ? '资产版块':'耗材版块'} ${item.dept_name}部门", 是否继续?`, '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    if(type == 1){
                       this.details.a_dept.splice(index,1)
                    }else{
                       this.details.c_dept.splice(index,1)
                    }
                });
            },
            // 添加管理员
            clickPersonnel(){
                let that = this
                complexPicker(this,{bool:true,disabledUsers:this.currentAdmin,maxUsers:1},function (res) {
                    that.details.admin = [...that.details.admin,...res.users]
                    console.log(that.details,'details')
                })
            },
            clickDept(type){
                let that = this
                let idsArr = type == 1 ? this.a_deptArr : this.c_deptArr
                departmentsPicker(this,{disDept:idsArr},function (res) {
                    let {a_dept,c_dept} = that.details
                    if(type == 1){
                       that.details.a_dept = [...a_dept,...res.departments]
                    }else{
                       that.details.c_dept = [...c_dept,...res.departments]
                    }
                    console.log(that.details,'details')
                })
            },
            close(){
                this.details = {}
                this.$emit('back',true)
            },
            confrim(){
                let {admin,a_dept,c_dept} = this.details
                let obj = {
                   ...this.details,
                   users:JSON.stringify(admin),
                   a_dept:JSON.stringify(a_dept),
                   c_dept:JSON.stringify(c_dept)
                }
                delete obj.admin
                console.log(obj,'obj')
                updateDept(obj)
                .then((res)=>{
                    this.details = {}
                    this.$emit('back','success')
                })
            },
            // 获取仓库详情
            getWarehouseInfoDetails(id = this.id,isLoad=false){
               //当不需要拦截器的load显示，isLoad传参为true即可
               getWarehouseInfo({id,isLoad})
               .then((res)=>{
                    //  获取当前仓库下的管理员
                        let arr = []
                        for(let i=0;i<res.admin.length;i++){
                            arr.push(res.admin[i].admin_userid)
                            res.admin[i].emplId = res.admin[i].admin_userid
                            res.admin[i].name = res.admin[i].admin_name
                        }
                       this.currentAdmin = [...arr]
                    // 当前获取资产部门
                        let a_deptArr = []
                        for(let i=0;i<res.a_dept.length;i++){
                            a_deptArr.push(res.a_dept[i].dept_id.toString())
                            res.a_dept[i].id = res.a_dept[i].dept_id
                            res.a_dept[i].name = res.a_dept[i].dept_name
                        }
                        this.a_deptArr = [...a_deptArr]

                    // 当前获取耗材部门
                        let c_deptArr = []
                        for(let i=0;i<res.c_dept.length;i++){
                            c_deptArr.push(res.c_dept[i].dept_id.toString())
                            res.c_dept[i].id = res.c_dept[i].dept_id
                            res.c_dept[i].name = res.c_dept[i].dept_name
                        }
                        this.c_deptArr = [...c_deptArr]
                        this.details = res
                        console.log(this.details,'details')
               })
            }
        }
    }
</script>

<style lang="scss">
.updateMain{
    padding:40px 30px 40px 40px;
    background-color: #fff;
    .title{
        width: 100%;
        overflow: hidden;
        display: flex;
        align-items: center;
        margin-bottom: 27px;
        .el-input{
            width: 55%;
            .el-input__inner{
                border: 1px solid rgba(187, 187, 187, 1) !important;
            }
        }
        input::-webkit-input-placeholder{
            color:rgba(136, 136, 136, 1);
        }
        .el-input--small .el-input__inner{
            height: 30px !important;
            line-height: 30px !important;
            font-size: 12px !important;
        }
    }
    .titleText{
        width: 130px;
        text-align: right;
        color: #000;
        font-size: 12px;
        margin-right: 5px;
        i{
            color: #FF5157;
            margin-right: 3px;
        }
    }
    .inputType{
        width: calc(55% - 10px);
        height: 28px;
        display: flex;
        align-items: center;
        border: 1px solid rgba(187, 187, 187, 1);
        border-radius: 5px;
        padding-left: 10px;
        span{
            color: rgba(136, 136, 136, 1);
            font-size: 12px;
            cursor: pointer;
        }
    }
    .el-tag{
        // width:69px;
        // height: 30px;
        // line-height: 30px;
        // border-radius: 19px;
        background-color: rgba(233, 243, 255,0);
        color: rgba(96, 98, 102, 1) !important;
        font-size: 12px;
        text-align: center;
        font-family: Roboto;
        border: 1px solid rgba(56, 147, 255, 0);
        padding: 0 0 0 11px !important;
        // margin:4px 8px 4px 0;
        .el-icon-close{
            right: 2px !important;
            border-radius: 50%;
            text-align: center;
            position: relative;
            cursor: pointer;
            font-size: 12px;
            height: 16px;
            width: 16px;
            line-height: 17px;
            vertical-align: middle;
            top: -1.5px;
            color: rgba(96, 98, 102, 1) !important;
        }
        .el-tag--small .el-icon-close {
            -webkit-transform: scale(0.9) !important;
            transform: scale(0.9) !important
        }
        .el-icon-close:hover::before{
            border-radius: 45%;
            background: rgba(241, 241, 241, 1) !important;
            border: none;
        }
    }
    .department{
        display: flex;
        align-items: flex-start;
        min-height:173px;
        margin-bottom: 27px;
        .textareaType{
            min-height:151px;
            padding: 11px;
            flex: 1;
            border: 1px solid rgba(187, 187, 187, 1) !important;
            border-radius: 5px;
            .depBtn{
                width: 77px;
                height: 24px;
                line-height: 22px;
                border-radius: 3px;
                background-color: rgba(255, 255, 255, 0);
                color: rgba(14, 140, 253, 1);
                font-size: 12px;
                text-align: center;
                font-family: Roboto;
                border: 1px solid rgba(49, 150, 250, 1);
                cursor: pointer;
            }
            .menuList{
                width: 70%;
                height: 100%;
                margin-top: 10px;
                padding-left: 10px;
                .el-tag{
                    padding: 0 !important;
                }
                .el-tag .el-icon-close{
                    right: 7px !important;
                    top: -0.5px !important
                }
            }
        }
    }
    .btns{
        margin-top: 60px;
        margin-left: 130px;
        .el-button+.el-button{
            margin-left: 25px;
        }
        .el-button--small, .el-button--small.is-round{
            padding: 8px 15px;
        }
    }
}
</style>